<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('产品列表')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
	<div class="ui-layout-west">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title">
					<i class="fa icon-grid"></i> 产品分类
				</div>
				<div class="box-tools pull-right">
				   <!--  <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理产品分类"><i class="fa fa-edit"></i></a> -->
					<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新产品分类"><i class="fa fa-refresh"></i></button>
				</div>
			</div>
			<div class="ui-layout-content">
				<div id="tree" class="ztree"></div>
			</div>
		</div>
	</div>
	
	<div class="ui-layout-center">
		<div class="container-div">
			<div class="row">
				<div class="col-sm-12 search-collapse" style="display: none;">
					<form id="user-form">
						<input type="hidden" id="productCatogoryId" name="productCatogoryId">
		                <input type="hidden" id="parentId" name="parentId">
						<div class="select-list">
							<ul>
	                            <li>
	                                <p>供应商名称：</p>
	                                <input type="text" id="supplierName"  name="params[supplierName]"/>
	                            </li>
	                            <li>
	                                <p>产品名称：</p>
	                                <input type="text" name="productName"/>
	                            </li>
	                            <li>
	                                <p>产品类别：</p>
	                                <select name="productCategory" th:with="type=${@dict.getType('product_category')}">
	                                    <option value="">所有</option>
	                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
	                                </select>
	                            </li>
	                            <li>
	                                <p>货号：</p>
	                                <input type="text" name="productNo"/>
	                            </li>
	                            <li>
	                                <p>计量单位：</p>
	                                <select name="productUnit" th:with="type=${@dict.getType('product_unit')}">
	                                    <option value="">所有</option>
	                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
	                                </select>
	                            </li>
	                            <li>
	                                <p>产品状态：</p>
	                                <select name="prodcutStatus" th:with="type=${@dict.getType('product_status')}">
	                                    <option value="">所有</option>
	                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
	                                </select>
	                            </li>
	                            <li>
	                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
	                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
	                            </li>
	                        </ul>
						</div>
					</form>
				</div>
				
		        <div class="btn-group-sm" id="toolbar" role="group">
		        	<a class="btn btn-success" onclick="$.operate.addFull()" shiro:hasPermission="crm:product:add">
	                    <i class="fa fa-plus"></i> 添加
	                </a>
	                <a class="btn btn-primary single disabled" onclick="$.operate.editFull()" shiro:hasPermission="crm:product:edit">
	                    <i class="fa fa-edit"></i> 修改
	                </a>
	                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="crm:product:remove">
	                    <i class="fa fa-remove"></i> 删除
	                </a>
	                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="crm:product:export">
	                    <i class="fa fa-download"></i> 导出
	                 </a>
		        </div>
		        
		        <div class="col-sm-12 select-table table-striped">
				    <table id="bootstrap-table"></table>
				</div>
			</div>
		</div>
	</div>
	
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: layout-latest-js" />
	<th:block th:include="include :: ztree-js" />
	<script th:inline="javascript">
		var editFlag = [[${@permission.hasPermi('crm:product:edit')}]];
	    var removeFlag = [[${@permission.hasPermi('crm:product:remove')}]];
	    var productCategoryDatas = [[${@dict.getType('product_category')}]];
	    var productUnitDatas = [[${@dict.getType('product_unit')}]];
	    var prodcutStatusDatas = [[${@dict.getType('product_status')}]];
	    var prefix = ctx + "crm/product";

		$(function() {
		    var panehHidden = false;
		    if ($(this).width() < 769) {
		        panehHidden = true;
		    }
		    $('body').layout({ initClosed: panehHidden, west__size: 185 });
		    queryProductList();
		    queryProductCatogoryTree();
		});

		function queryProductList() {
			var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
		        sortName: "createTime",
		        sortOrder: "desc",
                modalName: "产品",
                columns: [{
                    checkbox: true
                },
                {
                    field : 'productId', 
                    title : '产品ID',
                    visible: false
                },
                {
                    field : 'supplierId', 
                    title : '供应商名称',
                    visible: false,
		            sortable: true
                },
                {
                    field : 'supplier.supplierName', 
                    title : '供应商',
		            sortable: true
                },
                {
                    field : 'productName', 
                    title : '产品名称',
		            sortable: true
                },
                {
                    field : 'productNo', 
                    title : '货号',
		            sortable: true
                },
				{
				    title: '图片',
				    formatter: function(value, row, index) {
				    	return $.table.imageView(row.productImage);
				    }
				},
                {
                    field : 'incomePrice', 
                    title : '进价(元)',
		            sortable: true
                },
                {
                    field : 'salePrice', 
                    title : '售价(元)',
		            sortable: true
                },
                {
                    field : 'productCategory', 
                    title : '产品类别',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(productCategoryDatas, value);
                    },
		            sortable: true
                },
                {
                    field : 'productUnit', 
                    title : '计量单位',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(productUnitDatas, value);
                    },
		            sortable: true
                },
                {
                    field : 'prodcutStatus', 
                    title : '产品状态',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(prodcutStatusDatas, value);
                    },
		            sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.productId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.productId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
		}
		
		function queryProductCatogoryTree()
		{
			var url = ctx + "crm/productCatogory/treeData";
			var options = {
		        url: url,
		        expandLevel: 2,
		        onClick : zOnClick
		    };
			$.tree.init(options);
			
			function zOnClick(event, treeId, treeNode) {
				$("#productCatogoryId").val(treeNode.id);
				$("#parentId").val(treeNode.pId);
				$.table.search();
			}
		}
		
		$('#btnExpand').click(function() {
			$._tree.expandAll(true);
		    $(this).hide();
		    $('#btnCollapse').show();
		});
		
		$('#btnCollapse').click(function() {
			$._tree.expandAll(false);
		    $(this).hide();
		    $('#btnExpand').show();
		});
		
		$('#btnRefresh').click(function() {
			queryProductCatogoryTree();
		});

	</script>
</body>
</html>